<template>
  <view class="my-collect-page">
    <!-- 标签切换栏 -->
    <view class="tab-bar">
      <view 
        :class="['tab-item', currentTab === 0 ? 'active' : '']" 
        @click="switchTab(0)"
      >
        商品收藏
      </view>
      <view 
        :class="['tab-item', currentTab === 1 ? 'active' : '']" 
        @click="switchTab(1)"
      >
        店铺收藏
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="tab-content">
      <!-- 商品收藏 -->
      <view v-if="currentTab === 0" class="goods-collect">
       <!-- <view class="recommendation-section">
          <view class="recommendation-header">
            <text class="heart-icon">❤️</text>
            <text class="recommendation-text">为您推荐</text>
            <text class="heart-icon">❤️</text>
          </view>
        </view> -->
        <view class="goods-container">
          <view 
            class="goods-item" 
            v-for="(item, index) in goodsList" 
            :key="index"
          >
            <image :src="item.img" class="goods-img"></image>
            <view class="goods-title">{{ item.title }}</view>
            <view class="goods-desc">{{ item.desc }}</view>
            <view class="goods-price">¥ {{ item.price }}</view>
            <view class="delete-btn" @click="deleteGoods(index)">删除</view>
            <!-- 自营标签，根据需求决定是否显示 -->
            <view class="self-operated-tag" v-if="item.isSelfOperated">自营</view>
          </view>
        </view>
      </view>
      <!-- 店铺收藏 -->
      <view v-else-if="currentTab === 1" class="shop-collect">
        <view class="empty-tip" v-if="shopList.length === 0">
          暂无店铺收藏
        </view>
        <view 
          class="shop-item" 
          v-else 
          v-for="(shop, index) in shopList" 
          :key="index"
        >
          <image :src="shop.logo" class="shop-logo"></image>
          <view class="shop-name">{{ shop.name }}</view>
          <view class="delete-shop-btn" @click="deleteShop(index)">删除</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0, // 当前选中标签，0-商品收藏、1-店铺收藏
      // 模拟商品收藏数据，结构和主页 goodsList 对应
      goodsList: [
        {
          id: 1,
          img: '/static/balance/口红.png', 
          title: '影新款刺绣九色眼部彩...',
          desc: 'QD专为大众女性设计，多...',
          price: '0.01',
          isSelfOperated: true // 标识是否自营
        },
        {
          id: 2,
          img: '/static/balance/口红.png', 
          title: '腮蓝细腻丝滑元气单色...',
          desc: '', 
          price: '100.00',
          isSelfOperated: false
        }
      ],
      shopList: [] // 店铺收藏数据，可按需填充
    };
  },
  methods: {
    switchTab(tabIndex) {
      this.currentTab = tabIndex;
    },
    deleteGoods(index) {
      uni.showModal({
        title: '提示',
        content: '确定删除该商品收藏吗？',
        success: (res) => {
          if (res.confirm) {
            this.goodsList.splice(index, 1);
            uni.showToast({
              title: '删除成功',
              icon: 'none'
            });
          }
        }
      });
    },
    deleteShop(index) {
      uni.showModal({
        title: '提示',
        content: '确定删除该店铺收藏吗？',
        success: (res) => {
          if (res.confirm) {
            this.shopList.splice(index, 1);
            uni.showToast({
              title: '删除成功',
              icon: 'none'
            });
          }
        }
      });
    },
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.my-collect-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}
.nav-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15px 10px;
  border-bottom: 1px solid #eee;
}
.back-btn {
  margin-right: 10px;
}
.nav-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  flex: 1;
  text-align: center;
}
.tab-bar {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  margin-top: 10px;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  color: #333;
}
.tab-item.active {
  color: #ff3333; 
  border-bottom: 2px solid #ff3333;
}
.tab-content {
  background-color: #fff;
  margin-top: 10px;
  padding: 10px;
}
/* 商品收藏样式，复用主页 goods-item 相关样式逻辑 */
.goods-collect {
  display: flex;
  flex-direction: column;
  padding: 10rpx;
}

.recommendation-section {
  margin-bottom: 20rpx;
}

.recommendation-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

.heart-icon {
  font-size: 32rpx;
  color: #FF4444;
}

.recommendation-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.goods-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20rpx;
}

.goods-item {
  width: calc(50% - 10rpx);
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-sizing: border-box;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  position: relative;
}

.goods-img {
  width: 100%;
  height: 300rpx;
  border-radius: 12rpx;
  object-fit: cover;
}

.goods-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-top: 16rpx;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.goods-desc {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.goods-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff3838;
  margin-top: 12rpx;
}

.self-operated-tag {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  background-color: #ff3838;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.delete-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  color: #ff3838;
  font-size: 24rpx;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  border: 1rpx solid #ff3838;
}
/* 店铺收藏样式 */
.shop-collect {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.empty-tip {
  text-align: center;
  padding: 20px 0;
  color: #999;
}
.shop-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
}
.shop-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}
.shop-name {
  font-size: 14px;
  color: #333;
  flex: 1;
}
.delete-shop-btn {
  color: #ff3333;
  font-size: 12px;
}
</style>